<!-- src/views/HomeLayout.vue -->
<template>
  <div id="app-layout">
    <header class="main-header">
      <nav class="container">
        <!-- Logo -->
        <router-link to="/" class="logo">智能剪纸</router-link>

        <!-- 主要菜单 -->
        <div class="menu-items">
          <router-link to="/">模板探索</router-link>
          <router-link to="/create">智能创作</router-link>
          <router-link to="/heritage">教育传承</router-link>
        </div>

        <!-- 搜索与用户区 -->
        <div class="user-controls">
          <input type="text" placeholder="搜索..." />
          <router-link to="/profile">个人中心</router-link>
          <router-link to="/user/login" class="btn-login">登录</router-link>
        </div>
      </nav>
    </header>

    <!-- 动态内容区：渲染子路由组件（如 TemplateExplorer.vue） -->
    <main class="content-view">
      <router-view />
    </main>

    <footer class="main-footer">
      <p>&copy; 2025 智能剪纸指导创作系统. 版权所有.</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
// HomeLayout 逻辑简单，主要负责布局
</script>

<style scoped>
/* 简单的布局样式，建议后续使用 CSS 预处理器或 Utility Class 库 */
.main-header {
  background-color: #e53935; /* 剪纸红 */
  color: white;
  padding: 10px 0;
}
.main-header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.logo {
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  color: white;
}
.menu-items a {
  margin-left: 20px;
  color: white;
  text-decoration: none;
}
.user-controls input {
  padding: 5px;
  margin-right: 10px;
}
.btn-login {
  background-color: white;
  color: #e53935;
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
}
.content-view {
  min-height: 85vh; /* 确保内容区有最小高度 */
  padding: 20px 0;
}
.main-footer {
  background-color: #333;
  color: #ccc;
  text-align: center;
  padding: 10px 0;
}
</style>
